/*
 * @Author: nqx2007 fenglimima334@163.com
 * @Date: 2023-12-05 07:47:52
 * @LastEditors: nqx2007 fenglimima334@163.com
 * @LastEditTime: 2023-12-10 22:21:52
 * @FilePath: /operator-manager/src/pages/FindPw/index.tsx
 * @Description: 找回密码
 */

import { updatePassword, validateCode } from '@/services';
import { loginPath } from '@/utils/globalConstants';
import { useNavigate } from '@umijs/max';
import { Button, Steps } from 'antd';
import { FormInstance } from 'antd/lib';
import { useRef, useState } from 'react';
import EnterPassword from './components/EnterPassword';
import PhoneCode from './components/PhoneCode';
import styles from './index.less';
import { FindForm } from './type.d';

const items = [
  { title: '手机号验证' },
  { title: '重置密码' },
  { title: '重新登录' },
];
export default function FindPwPage() {
  const navigate = useNavigate();
  const [currentStep, setStep] = useState(0);
  const phoneCodeRef = useRef<{ phoneCodeForm: FormInstance }>();
  const enterPasswordRef = useRef<{ enterPasswordForm: FormInstance }>();
  const phoneRef = useRef();
  const handleClickToNext = () => {
    switch (currentStep) {
      case 0:
        {
          if (phoneCodeRef?.current) {
            const { phoneCodeForm } = phoneCodeRef?.current;
            phoneCodeForm.validateFields().then((values) => {
              console.log('提交的手机号和验证码', values);
              validateCode({ data: values }).then((res) => {
                if (res?.success) {
                  phoneRef.current = values[FindForm.PHONE];
                  setStep((step) => step + 1);
                }
              });
            });
          }
        }
        return;
      case 1:
        {
          if (enterPasswordRef?.current) {
            const { enterPasswordForm } = enterPasswordRef.current;
            enterPasswordForm.validateFields().then((values) => {
              console.log('提交的新密码数据', values);
              const data = {
                [FindForm.PASSWORD]: values[FindForm.PASSWORD],
                [FindForm.PHONE]: phoneRef.current,
              };
              updatePassword({ data }).then((res) => {
                if (res?.success) {
                  setStep((step) => step + 1);
                }
              });
            });
          }
        }
        return;
      case 2:
        return navigate(loginPath);
      default:
        return;
    }
  };
  return (
    <div className={styles.findPsContainer}>
      <div className={styles.header}>
        <div>
          万券惠
          <br />
          小二后台
        </div>
      </div>
      <div className={styles.content}>
        <Steps
          current={currentStep}
          labelPlacement="vertical"
          items={items}
          style={{ width: '60%', margin: '0 auto' }}
        />

        <div className={styles.findFormWrapper}>
          {currentStep === 0 ? <PhoneCode ref={phoneCodeRef} /> : null}
          {currentStep === 1 ? <EnterPassword ref={enterPasswordRef} /> : null}
          {currentStep === 2 ? (
            <div className={styles.successTips}>
              <p className={styles.title}>密码设置成功!</p>
              <p className={styles.text}>
                您的密码已设置成功，请牢记您的密码。
              </p>
            </div>
          ) : null}
          <div className={styles.btnArea}>
            {currentStep === 2 ? (
              <Button
                size="large"
                type="primary"
                onClick={handleClickToNext}
                className={styles.btn}
              >
                立即登录
              </Button>
            ) : (
              <Button
                size="large"
                type="primary"
                onClick={handleClickToNext}
                className={styles.btn}
              >
                下一步
              </Button>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}
